<script>
    const EmailModalForm = {
        props: ['email'],
        delimiters: ['{$', '$}'],
        data(){
            return {
                formProps: {
                    email: this.email
                }
            }
        },
        created(){
            this.formProps.email = '{{ request.user.email }}'
        },
        methods:{
            save(){
                const sendData = new FormData()
                sendData.append('email', this.formProps.email)
                sendData.append('owner', '{{ request.user.id }}')
                request({
                    method: 'post',
                    url: `{% url "baykeshop:userinfo" %}`,
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'multipart/form-data'
                    },
                    data: sendData
                }).then(res => {
                    if (res.data.code == 'ok') {
                        navbar.toastMessage('is-success', res.data.message)
                        this.$parent.close()
                        location.reload()
                    }else{
                        navbar.toastMessage('is-danger', res.data.message)
                    }
                })
            }
        },
        template: `
        <div class="modal-card" style="width: auto">
            <header class="modal-card-head">
                <p class="modal-card-title">修改邮箱</p>
                <b-button class="delete" type="is-danger" @click="$parent.close()" />
            </header>
            <section class="modal-card-body" style="overflow:inherit;">
                <b-field label="Email">
                    <b-input type="email"
                        v-model="formProps.email"
                        value="formProps.email"
                        maxlength="30">
                    </b-input>
                </b-field>
            </section>
            <footer class="modal-card-foot">
                <b-button
                    label="取消"
                    @click="$parent.close()" />
                <b-button
                    label="确认"
                    @click="save"
                    type="is-primary" />
            </footer>
        </div>
        `
    }

</script>